<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h1>{{ detail.title }}</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="detail">
      <el-col :span="6">
        <div class="surface">
          <img :src="src" :alt="detail.title">
        </div>
      </el-col>
      <el-col :span="18">
        <div class="title">
          <h3>{{ detail.name }}</h3>
        </div>
        <div class="price">
          <span class="selling">
            {{ detail.sellPrice | price }}
          </span>
          <span class="orig" v-if="detail.price && detail.price > detail.sellPrice">
            <del>
              {{ detail.price | price }}
            </del>
          </span>
        </div>
        <div class="author">
          {{ detail.author }}
        </div>
        <div class="pub">
          <span>
            {{ detail.house }}
          </span>
          <span>
            {{ detail.pubdate }} 出版
          </span>
        </div>
        <div class="oper">
          <div class="count">
            <el-input-number v-model="cnt" :min="1"></el-input-number>
          </div>
          <el-button type="primary" size="medium" round @click="addToCart">加入购物车</el-button>
          <!-- <el-button type="primary" size="medium" round>收藏</el-button> -->
        </div>
      </el-col>
    </el-row>

    <hr>

    <fieldset>
      <legend>
        书籍摘要
      </legend>
      <span v-html="detail.description"></span>
    </fieldset>
    <fieldset>
      <legend>
        评论
      </legend>
      <div v-if="review">
        <el-card class="box-card" v-for="item in review" :key="item.userid">
          {{ item.content }}
        </el-card>
      </div>
      <div v-if="login">
        <el-form :model="BookReview" :rules="rules" ref="BookReview">
          <el-form-item label="评价这本书" prop="content" required>
            <el-input v-model="BookReview.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="space-around">
              <el-button plain @click="submitForm('BookReview')">提交</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </fieldset>
  </div>
</template>

<script>
// import Data from '@/assets/books.json'
import { MarketGetBookDetail, MarketPostBookReview } from '@/utils/request'
import { checkAuth } from '@/utils/checkAuth'
import { int2price } from '@/utils/format'
import ShoppingCart from '@/utils/ShoppingCart'

export default {
  data () {
    return {
      cnt: 1,
      src: '',
      detail: {
        pubdate: [],
        description: ''
      },
      review: undefined,
      BookReview: {
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入您的评价', trigger: 'blur' }
        ]
      },
      login: false
    }
  },
  methods: {
    addToCart () {
      ShoppingCart.add(this.detail, this.cnt)
      this.$notify({
        title: '已加入购物车'
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          MarketPostBookReview(this.detail.isbn, this.BookReview.content).then(rsp => {
            console.log(rsp)
            const { success } = rsp.data
            if (success) {
              window.location.reload()
            }
          })
        } else {
          this.$notify({
            type: 'error',
            title: '未通过校验'
          })
          return false
        }
      })
    }
  },
  filters: {
    price (value) {
      return int2price(value, true)
    }
  },
  created () {
    const isbn = this.$route.params.id
    let self = this
    MarketGetBookDetail(isbn).then(rsp => {
      let { detail, review } = rsp.data

      detail.description = detail.description.split('\n').join('<br>')
      self.detail = detail

      if (review) {
        self.review = review.review
      }

      self.src = '/media/book/' + self.detail.surface
    })
    checkAuth().then(auth => {
      if (auth && auth.id) {
        self.login = true
      } else {
        self.login = false
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.detail {
  .surface {
    height: 100%;
    border: 1px solid lightgray;
    border-radius: 0.5em;
    padding: 0.5em;
    img {
      width: 100%;
    }
  }
  .title {
    h3 {
      margin: 0;
      margin-bottom: 0.5em;
    }
  }
  .price {
    line-height: 4em;
    .selling {
      color: red;
      font-size: 150%;
    }
    .orig {
      color: gray;
    }
  }
  .pub {
    color: gray;
    line-height: 3em;
  }
  .oper {
    margin: 1em;
    .count {
      margin: 1em;
    }
  }
}
</style>
